<template>
	<div class="chart-container">
		<div ref="mychart" class="chart"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default {
		data(){
			return{
				times: [], // 时间数组
				values1: [], // 数据数组
				values2:[],
				maxDataPoints: 20 // 显示的最大数据点数
			}
		},
		methods: {
			getData() {
				let that=this
				that.$axios.get("http://10.112.38.20:39898/get_rates/1").then(function(res) {
					// that.times = res.data.times;
					that.values1 = Object.values(res.data);
					that.drawChart()
				})
				that.$axios.get("http://10.112.38.20:39898/get_rates/2").then(function(res) {
					// that.times = res.data.times;
					that.values2 = Object.values(res.data);
					that.drawChart()
				})
			},
			drawChart() {
				const chartDom = this.$refs.mychart;
				if (!echarts.getInstanceByDom(chartDom)) {
					var myChart = echarts.init(chartDom);
				} else {
					var myChart = echarts.getInstanceByDom(chartDom);
				}

				
				// 定义折线图数据
				// const data = [820, 932, 901, 934, 700, 520, 500, 300];
				// const data = this.values;
				// const data2 = [120, 200, 150, 80, 70, 110, 130, 300];
				
				const option = {
					// 设置图表大小，占满整个容器
					grid: {
						left: '10%',
						right: '5%',
						top: '10%',
						bottom: '20%',
					},
					// 添加图例配置
					legend: {
						bottom: 10, // 图例显示在底部，可以设置一个合适的外边距
						data: ['链路1流量', '链路2流量'], // 图例项的数据，与 series 中的名称对应
						textStyle: {
							color: '#fff', // 图例文字颜色
							fontSize: 16, // 图例文字大小
							fontWeight: 'bold',
						},
						// 其他图例配置...
					},
					xAxis: {
						type: 'category',
						// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						data: this.times,
						axisLabel: {
							textStyle: {
								color: '#fff', // 字体颜色
								fontSize: 12, // 字体大小
								fontWeight: 'bold', // 字体粗细，可以是 'normal', 'bold', 'bolder', 'lighter'，或者数字
								fontStyle: 'italic', // 字体样式，可以是 'normal', 'italic', 'oblique'
							},
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							show: true, // 显示标签
							textStyle: {
								color: '#fff',
								fontSize: 12,
								fontWeight: 'bold',
								fontStyle: 'italic',
							},
							// 只在最上方显示单位
							formatter: function(value, index) {
								if (index === 0) { // 假设最上方的index为0
									return 'Mb/s';
								} else {
									return value;
								}
							}
						},
						axisTick: {
							show: false // 隐藏其他刻度的标签
						},
					},
					series: [{
						name: '链路1流量', // 系列名称，与图例项对应
						data: this.values1,
						type: 'line',
						smooth: true, // 添加此行来启用平滑曲线
						lineStyle: {
							color: '#18FFFF', // 设置线条颜色为红色
							width: 5, // 设置线条宽度为5像素，即加粗
						},
						itemStyle: {
							color: '#18FFFF',
						},
					},
					{
						name: '链路2流量', // 系列名称，与图例项对应
						data: this.values2,
						type: 'line',
						smooth: true, // 添加此行来启用平滑曲线
						lineStyle: {
							color: 'red', // 设置线条颜色为红色
							width: 5, // 设置线条宽度为5像素，即加粗
						},
						itemStyle: {
							color: 'red',
						},
					}
				],
				};
				
				myChart.setOption(option);
			},
			switper(){
				let that=this
				that.getData()
				var timerID=setInterval(()=>that.getData(), 1000)
			},
			containsKeyword(text) {
				return this.keyword.some(keyword => text.includes(keyword));
			},
			
		},
		created() {
			this.switper();
		},
		mounted() {
			// this.getData();
			// this.drawChart();
		},
	}
</script>

<style lang="scss" scoped>
	.textstyle{
		white-space:pre-wrap;
		font-size:20px;
		line-height: 150%;
	}
	.chart-container {
		width: 100%;
		height: 100%; /* 设置容器高度 */
	}

	.chart {
		width: 100%;
		height: 100%; /* 设置图表大小占满容器 */
	}
	
</style>
